<template>
  <JstCardLayout class="container">
    <div class="title">
      <div class="icon">
        <el-avatar :size="48" :src="avatar">
          <img src="@/assets/default-avatar.svg" />
        </el-avatar>
      </div>
      <div class="info">
        <div class="main">{{ $utils.formatEmptyString(realName) }}</div>
        <div class="sub">
          {{ $utils.formatEmptyString(mobilePhone) }}
          <el-button @click="toUserSetting" style="margin-left: 8px" link
            >个人设置</el-button
          >
        </div>
      </div>
    </div>

    <div class="list">
      <el-row>
        <template v-if="isLoading">
          <el-col :span="8">
            <div style="width: 240px" class="item">
              <el-skeleton :rows="2" animated></el-skeleton>
            </div>
          </el-col>

          <el-col :span="8">
            <div style="width: 240px" class="item">
              <el-skeleton :rows="2" animated></el-skeleton>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="width: 240px" class="item">
              <el-skeleton :rows="2" animated></el-skeleton>
            </div>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="8" v-for="(item, index) in employees" :key="index">
            <div
              class="item"
              @click="chooseEmployee(item)"
              :class="currentEmployeeId == item.EmployeeId ? 'choose' : ''"
            >
              <div class="line"></div>
              <div class="item-title">
                {{ $utils.formatEmptyString(item.EmployeeName) }}
              </div>

              <el-popover trigger="hover" :content="item.CompanyName">
                <template #reference>
                  <div class="item-company-name">
                    公司名称：{{ $utils.formatEmptyString(item.CompanyName) }}
                  </div>
                </template>
              </el-popover>

              <div>所属角色：{{ $utils.formatEmptyString(item.RoleList) }}</div>

              <div class="tag">{{ companyTypeText(item.CompanyType) }}</div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
  </JstCardLayout>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick, computed } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import request from "@/public/request";
import { useRouter } from "vue-router";

const employees = ref([]);
const isLoading = ref(true);
const store = useStore();
const Router = useRouter();

const getEmployeeList = async () => {
  let employeess = await this.$http.get(
    "/api/CurrentUser/GetUserBindEmployeeList"
  );
  employees.value = employeess;
  nextTick(() => {
    isLoading.value = false;
  });
};

const companyTypeText = (v) => {
  let t = "";
  switch (v) {
    case 0:
      t = "平台";
      break;
    case 1:
      t = "企业客户";
      break;
    case 2:
      t = "供应商";
      break;
  }
  return t;
};
const chooseEmployee = async (item) => {
  let res = await request.post("/api/AuthUser/ChooseEmployee", {
    employeeId: item.EmployeeId,
  });

  if (res.Status == false) {
    ElMessage.error(res.Message);
    return;
  }

  store.commit("auth/setToken", {
    token: res.Data,
    rememberMe: true,
  });

  await Promise.allSettled([
    store.dispatch("auth/getCurrentEmployeeInfo"),
    store.dispatch("menu/getCurrentEmployeeMenuTree"),
  ]);
  // 根据角色不同  前往 (工作台 | 后台)

  Router.push(store.getters["menu/workbenchPath"]);
};
const getIsHaveBindEmployee = async () => {
  let employeeRes = await request.get(
    "/api/CurrentUser/GetUserBindEmployeeList"
  );
  return employeeRes;
};

const initProcess = async () => {
  // 检查是否已经绑定 未绑定的跳转到审核界面
  let res = await getIsHaveBindEmployee().catch(() => {});
  if (res.length != 0) {
    getEmployeeList();
  } else {
    Router.push({
      path: "/join/entry",
    });
  }
};
// 前往用户设置
const toUserSetting = () => {
  Router.push("/manage/userSetting");
};

const realName = computed(() => {
  if (store.state.auth.user) {
    return store.state.auth.user.RealName;
  }
  return "";
});

const mobilePhone = computed(() => {
  if (store.state.auth.user) {
    return store.state.auth.user.MobilePhone;
  }
  return "";
});

const avatar = computed(() => {
  if (store.state.auth.user) {
    return store.state.auth.user.Avatar;
  }
  return null;
});

const currentEmployeeId = computed(() => {
  if (store.state.auth.employee) {
    return store.state.auth.employee.Id;
  }
  return "";
});

onMounted(() => {
  initProcess();
});
</script>

<style lang="scss" scoped>
.container {
  width: 962px;
  margin: 0 auto;
}

.title {
  background: #f8f8f8;
  border-radius: 4px;
  height: 78px;
  margin-top: 20px;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
  align-items: center;
}
.icon {
  background: #dcdfe6;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-left: 20px;
}
.info {
  margin-left: 11px;
  .main {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #3c4144;
    margin-bottom: 4px;
  }
  .sub {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #969799;
  }
}
.list {
  width: 852px;
  margin: 0 auto;
  margin-top: 13px;

  .choose {
    .line {
      height: 3px;
      background-color: #409eff;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .tag {
      color: #409eff;
      border: 1px solid #409eff;
    }
  }
  .item:hover {
    @extend .choose;
  }

  .item {
    position: relative;
    width: 240px;
    min-height: 96px;
    border: 1px solid #e8e8e8;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #9b9b9b;
    padding: 14px 10px;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .item-title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #3c4144;
  }
  .item-company-name {
    margin-top: 3px;
    margin-bottom: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .tag {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #9b9b9b;
    width: 64px;
    text-align: center;
    margin-top: 13px;
  }
}
</style>
